<!DOCTYPE html>
<html>
<head>
  <title>The page you were looking for doesn't exist (404)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
  body {
    background-color: #3498db;
    color: #2E2F30;
    font-family: sans-serif;
    margin: 0;
  }

  footer {
    position: absolute;
    bottom: 1%;
    width: 100%;
    text-align: center;
    font-size: .6em;
    color: #e3e3e3;
  }

  a {
    color: #e3e3e3;
  }

  a:hover {
    color: #393939;
  }

  .dialog {
    float:right;
    text-align: left;
    width: 50%;
    margin: 5% auto 0;
  }

  h1 { 
    font-size: 5em;
    color: #fff;
    line-height: .7em;
  }

  p {
    font-size: 1.4em;
    color: #fff;
    padding-right: 5%;
  }
  .image {
    position: absolute;
    float: left;
    width: 64%;
    margin: 12% 0 0 5%;

  }
  @media only screen and (max-width: 767px) {
    .image {
      width: 90%;
      margin: 5% 0 0 5%;
    }
    .dialog {
    float:none;
    text-align: center;
    width: 90%;
  }
  }  
  </style>
</head>

<body>
  <!-- This file lives in public/404.html -->
  
  <div>
    <div class="dialog">
      <h1>Oops.</h1>
      <p>We were unable to find the page you were looking for.</p>
    </div>
    <img src="/error/image/spilled-milk.png" class="image">
  </div> 
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    //定义获取词语下标
    var a_idx = 0;
    jQuery(document).ready(function($) {
        //点击html时触发事件
        $("html").click(function(e) {
            //需要显示的词语
            var a = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
            //设置词语给span标签
            var $i = $("<span/>").text(a[a_idx]);
            //下标等于原来下标+1  余 词语总数
            a_idx = (a_idx + 1)% a.length;
            //获取鼠标指针的位置，分别相对于文档的左和右边缘。
            //获取x和y的指针坐标
            var x = e.pageX, y = e.pageY;
            //在鼠标的指针的位置给$i定义的span标签添加css样式
            $i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
                "top" : y - 20,
                "left" : x,
                "position" : "absolute",
                "font-weight" : "bold",
                "color" : "#ff6651"
            });
            //在body添加这个标签
            $("body").append($i);
            //animate() 方法执行 CSS 属性集的自定义动画。
            //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
            //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
            $i.animate({
                //将原来的位置向上移动180
                "top" : y - 180,
                "opacity" : 0
                //1500动画的速度
            }, 1500, function() {
                //时间到了自动删除
                $i.remove();
            });
        });
    });
</script>
<!-- <footer><a href="http://www.free404.com" target="_blank">free404.com</a></footer> -->
</html>
